<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送验证码</title>
    <style>
        * {
            margin: 10px auto;
            padding: 0;
        }
        
        .box {
            width: 500px;
            margin: 10px auto;
            padding: 5px;
            text-align: center;
            /* border: 1px solid red; */
        }
        
        input,
        .header button {
            width: 300px;
            height: 40px;
            border: 1px solid gainsboro;
            border-radius: 5px;
        }
        
        input {
            padding-left: 10px;
        }
        
        .header button {
            color: white;
            background-color: orange;
            border: 0;
            cursor: pointer;
        }
        
        table {
            width: 100%;
            line-height: 40px;
            border: 1px solid red;
        }
        
        table button {
            border: 2px solid blueviolet;
            border-radius: 4px;
            padding: 2px 8px;
            cursor: pointer;
        }
        
        .header {
            margin-bottom: 40px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            <input type="text" id="userName" placeholder="请输入手机号" maxlength="12" oninput="value=value.replace(/[^\d]/g,'')">
            <input type=" text " id="age " placeholder="请输入验证码 " maxlength="6 ">
            <button type="button " id="faSong ">发送验证码</button>
            <button type="button " id="add">确认</button>
        </div>
        <div class="main ">
            <table border="1 " cellpadding="0 " cellspacing="0 ">
                <thead>
                    <tr>
                        <th>手机号</th>
                        <th>验证码</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>15893305872</td>
                        <td>123456</td>
                        <td><button type="button " onclick="del() ">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        var userName = document.getElementById('userName');
        var age = document.getElementById('age');
        var faSong = document.getElementById('faSong');
        var add = document.getElementById('add');

        var tbody = document.querySelector('tbody');

        //添加
        add.onclick = function() {
            if (userName.value == '' || age.value == '') {
                alert('请完整后再确认！');
            } else {
                var obj = {
                    id: +new Date(),
                    userName: userName.value,
                    age: age.value
                }
                arr.push(obj);
                userName.value = '';
                age.value = '';

                show(arr);
            }
        }

        //渲染
        function show(arr) {
            str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `<tr>
                        <td>${arr[i].userName}</td>
                        <td>${arr[i].age}</td>
                        <td><button type="button " onclick="del(${arr[i].id}) ">删除</button></td>
                    </tr>`;
            }
            tbody.innerHTML = str;
        }

        //删除
        function del(Id) {
            for (var i = 0; i < arr.length; i++) {
                if (Id == arr[i].id) {
                    arr.splice(i, 1);

                    show(arr);
                }
            }
        }

        faSong.onclick = function() {
            //获取随机验证码
            userName.value = shu();
            this.disabled = 'disabled'; //设置按钮禁用
            this.style.backgroud = '#ccc';
            this.style.opacity = 0.8;
            var i = 5;
            var that = this;
            var timer = setInterval(function() {
                i--;
                that.innerHTML = '获取验证码' + 1;
                if (i == 0) {
                    clearInterval(timer);
                    that.innerHTML = '获取验证码';
                    that.removeAttribute('disabled');
                }
            }, 1000);
        }

        //获取6位随机整数
        function shu() {
            var str = ''
            for (var i = 0; i < 6; i++) {
                str += zi(0, 9)
            }
            return str
        }

        function zi(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
    </script>
</body>

</html>